<template>
    <div id="courseDetail" :style="style" @scroll="checkScroll">
        <div v-if="topShow" transition="fixed-top-bar">
            <div>
                <h3>{{title}}</h3>
                <p>
                    <span v-for="tag in tags" class="tag">{{tag}}</span>
                    <span>阅读 {{view}}</span>
                </p>
            </div>
        </div>
        <div class="float">
            <h1>课件 · 北京邮电大学图论课程网站</h1>
        </div>
        <div class="body" style="min-height: calc(100% - 30px);">
            <div class="title">
                <p>{{created}}</p>

                <h3>{{title}}</h3>

                <p>
                    <span v-for="tag in tags" class="tag">{{tag}}</span>
                    <span>阅读 {{view}}</span>
                </p>
            </div>

            <div class="content">
                <div class="article">
                    <p v-for="el in article" track-by="$index">{{el}}</p>
                </div>
                <div v-if="imgs.length>0">
                    <img v-for="el in imgs" :src="el.path">
                </div>
                <div class="attachments" v-if="attachments.length>0">
                    <h2>附件</h2>
                    <div v-for="el in attachments">
                        <a :href="el.path" :download="el.path">{{el.name}}</a>
                    </div>
                </div>
            </div>
        </div>

        <!--<ul class="list">-->
        <!--<li is="item" v-for="el in list" :info="el"></li>-->
        <!--</ul>-->
    </div>
</template>

<style>
    /* 必需 */
    .fixed-top-bar-transition {
        transition: all .3s ease;
        opacity: 1;
        background-color: white;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
    }

    .fixed-top-bar-enter, .fixed-top-bar-leave {
        opacity: 0;
    }
</style>

<script type="text/babel">

    //    let VueComponent_Item = require('../../component/item/item.vue');
    var Status_tab = require('../../component/sideNav/tabStatus');
    let message = require('../../component/message/message.es6');

    module.exports = {
        props: ['width', 'bannerShow', 'tab'],
        data: ()=>({
            id: '',
            imgs: [],
            attachments: [],
            tags: [],
            view: 0,
            title: '',
            article: [],
            created: '',
            topShow: false
        }),
        computed: {
            style: function () {
                return {
                    'width': (this.width - 50) + 'px',
                    'left': '50px'
                }
            }
        },
        methods: {
            checkScroll: function (e) {
                this.topShow = this.$el.scrollTop > 135;
            }
        },
//        components: {
//            item: VueComponent_Item
//        },
        created: function () {
            this.tab = Status_tab.course;
            this.bannerShow = false;
            this.id = this.$route.params.id;
            this.$http({
                        url: '/api/course/',
                        method: 'GET',
                        data: {
                            _id: this.id
                        }
                    })
                    .then((res)=> {
                        // success callback
                        if (res.data.code != 0)return message.open(res.data.msg);
                        let info = res.data.info;
                        console.dir(info);

                        this.imgs = info.imgs.map(function (img) {
                                    img.path = '/file/view/' + img.path;
                                    return img;
                                }) || [];
                        this.attachments = info.attachments.map(function (attachment) {
                                    attachment.path = '/file/download/' + attachment.path;
                                    return attachment;
                                }) || [];
                        this.tags = info.tags.split('#');
                        this.view = info.view;
                        this.article = info.article.split('\n');
                        this.title = info.title;

                        let updated = new Date(info.updated);
                        this.created = `${updated.getFullYear()}-${updated.getMonth() + 1}-${updated.getDate()}`;
                    }, function (response) {
                        // error callback
                        location.hash = '#!/courseList/';
                        return message.open('无法连接到服务器,请重试!');
                    });
        }
    }
</script>